<template>
  <v-carousel :cycle="false" hide-controls>
    <v-carousel-item v-for="status in statuses" :key="status.code">
      <v-container fluid>
        <h3 class="display-3 secondary--text">{{status.code}} {{status.text}}</h3>
        <br/>
        <p class="display-1" v-for="(paragraph, i) in status.description" :key="i">{{paragraph}}</p>
      </v-container>
    </v-carousel-item>
  </v-carousel>
</template>

<script>
export default {
  data() {
    return {
      statuses: [
        {
          code: 200,
          text: 'OK',
          description: ["正常响应"]
        },
        {
          code: 201,
          text: 'Created',
          description: ["创建成功", "通常用于新建什么东西的请求，但直接用200也未尝不可。"]
        },
        {
          code: 204,
          text: 'No Content',
          description: ["正常响应，但没有响应body", '某些JS库（如jQuery）会尝试解析响应body，如果不明确给出204，则JS会抛异常，因此，正常的无body响应的状态码一定要设为204！']
        },
        {
          code: 301,
          text: 'Moved Permanently',
          description: [
            '永久重定向', 
            '这个状态只有在域名切换期间暂时使用，或用于http跳转https，和开发关系不大。',
            '这个状态告诉浏览器以后永远不要再往这个URL请求了，想发的时候直接发到Location头里指定的URL去。'
          ]
        },
        {
          code: 302,
          text: 'Found',
          description: [
            '临时重定向', 
            '这个状态告诉浏览器当前请求处理完了，接下来应该发请求到Location头里指定的URL去。以后如果再要发请求，也应该先往跳转前的URL发。',
            '这个状态经常用于增删改的请求处理完成后的响应，老外称之为“POST redirect GET”，这是传统网站的最佳实践之一。'
          ]
        },
        {
          code: 304,
          text: 'Not Modified',
          description: [
            "没有改动",
            "这个状态是服务器告诉浏览器直接使用缓存就行了。"
          ]
        },
        {
          code: 400,
          text: 'Bad Request',
          description: [
            "请求有问题",
            "服务器告诉客户端/浏览器请求有问题，但问题不在服务器。",
            "服务器应在响应body里明确说明问题出在哪儿，比如哪个请求参数出了什么问题。"
          ]
        },
        {
          code: 401,
          text: 'Unauthorized',
          description: [
            "未授权",
            "通常用于未登录的用户访问需要登录后才能访问的页面/接口。"
          ]
        },
        {
          code: 403,
          text: 'Not Permitted',
          description: [
            "禁止访问",
            "通常用于已登录用户越权访问资源。但是如果你不想让该用户知道该资源的存在，也可以给404响应。"
          ]
        },
        {
          code: 404,
          text: 'Not Found',
          description: [
            "资源不存在",
            "资源本身不存在，或由于种种原因当前用户不应该知道该资源的存在时，可以用这个状态。"
          ]
        },
        {
          code: 405,
          text: 'Method Not Allowed',
          description: [
            "访问方式不被允许",
            "例如客户端POST一个只接受GET请求的URL。"
          ]
        },
        {
          code: 413,
          text: 'Entity Too Large',
          description: [
            "请求body过大",
            "常见于文件上传。",
            "通常不解决，实在要解决，就调高反向代理的请求body大小限制。"
          ]
        },
        {
          code: 415,
          text: 'Unsupported Media Type',
          description: [
            "Content Type不支持",
            "这个响应状态的名称不太正常，请无视。",
            "服务器无法处理当前请求的Content Type。",
            "例如，请求的Content Type是application/json，但服务器只支持application/x-www-form-urlencoded时，应返回该响应状态，并在Accept响应头里列出支持的Content Type。"
          ]
        },
        {
          code: 422,
          text: 'Unprocessible Entity',
          description: [
            "请求body无法处理",
            "这个响应多用于客户端提交了不符合Content-Type里声明的格式的请求。",
            "例如，Content-Type为application/json，服务器也支持这个Content Type，但是实际请求body里塞的是XML，或缺少半个花括号的json。"
          ]
        },
        {
          code: 500,
          text: 'Internal Server Error',
          description: [
            "服务器内部异常"
          ]
        },
        {
          code: 502,
          text: 'Bad Gateway',
          description: [
            "网关错误",
            "这个状态通常说明反向代理已启动，但它上游的web应用没有启动"
          ]
        },
        {
          code: 503,
          text: 'Service Unavailable',
          description: [
            "服务不可用",
            "这个状态通常说明反向代理都没启动"
          ]
        },
        {
          code: 504,
          text: 'Gateway Timeout',
          description: [
            "网关超时",
            "这个状态通常说明上游web应用处理时间过长。这通常意味着web应用出死循环了，或需要优化。"
          ]
        }
      ]
    }
  }
}
</script>
